<!--{template common/container/pc/header_start}-->
<link rel="stylesheet" href="static/scss/default/index.css?{VERHASH}">
<link rel="stylesheet" type="text/css" href="{MOD_PATH}/template/mobile/assets/index.css?{VERHASH}"/>
<style>
	.editdialog .el-overlay-dialog{
		padding: 16px;
	}
	.editdialog .el-overlay-dialog .el-dialog{
		width: 100%;
	}
	.editdialog .el-overlay-dialog .el-dialog .el-dialog__header{
		padding: 15px;
    	padding-bottom: 10px;
	}
	.editdialog .el-overlay-dialog .el-dialog .el-dialog__body{
		padding: 10px 15px;
	}
	.editdialog .el-overlay-dialog .el-dialog .el-dialog__footer{
		padding: 5px 15px 10px;
	}
</style>
<!--{template common/container/pc/header_end}-->
<div id="dzzoffice">
	<el-container class="page-main">
		<el-header class="page-header" height="40px" style="border: 0;background: transparent;padding: 0 10px">
			<a class="h-left" href="user.php?mod=my" style="color: var(--el-text-color-regular);">
				<el-icon size="large"><Arrow-Left /></el-icon>
			</a>
			<div class="h-center" style="justify-content: center;"> 
				<el-text size="large">{lang subscriber_data}</el-text>
			</div>
		</el-header>
		<el-main >
			<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-position="top">
				<el-form-item label="{lang avatar}：">
					<el-upload 
						class="avatar-uploader" 
						action="user.php?mod=my&op=profile&do=uploadimg"
						name="file"
						accept="image/png,image/jpg,image/jpeg,image/gif" 
						:on-success="handleLogoSuccess"
						:on-progress="handleLogoProgress"
						:before-upload="beforeLogoUpload"
						:show-file-list="false">
						<el-progress v-show="ispercentage" type="circle" :width="148" :percentage="percentage"></el-progress>
						<template v-if="ruleForm.imgpath||avatarstatus=='1'">
							<template v-if="ruleForm.imgpath">
								<el-image class="avatarimg" fit="contain" :src="ruleForm.imgpath" style="max-width:120px;max-height:120px;"></el-image>
							</template>
							<template v-else>
								<div class="avatarstatus">
									<img :src="'avatar.php?uid=$_G['uid']&random='+Math.ceil(Math.random()*100)" title="admin" class=" special_avatar_class" style="max-width:100%;max-height:100%;vertical-align: middle;">
								</div>
							</template>
						</template>
						<el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
					</el-upload>
				</el-form-item>
				<el-form-item label="{lang email_input}：" prop="email">
					<el-input class="maxWidth" v-model.trim="ruleForm.email"></el-input>
					<el-text type="info" class="tipTxt" size="small">{lang email_input_msg}</el-text>
				</el-form-item>
				<el-form-item label="{lang nickname}：" prop="nickname">
					<el-input class="maxWidth" v-model.trim="ruleForm.nickname"></el-input>
					<el-text type="info" class="tipTxt" size="small">{lang nickname_input_msg}</el-text>
				</el-form-item>
				<el-form-item label="{lang username}：" prop="username">
					<el-input class="maxWidth" v-model.trim="ruleForm.username"></el-input>
					<el-text type="info" class="tipTxt" size="small">{lang username_input_msg}</el-text>
				</el-form-item>
				<el-form-item label="{lang phone_number}：" prop="phone">
					<el-input class="maxWidth" v-model.trim="ruleForm.phone"></el-input>
				</el-form-item>
				<el-form-item label="{lang weixin}：" prop="weixinid">
					<el-input class="maxWidth" v-model.trim="ruleForm.weixinid"></el-input>
				</el-form-item>
				<el-form-item label="{lang original_password}：" prop="password0">
					<el-input class="maxWidth" v-model.trim="ruleForm.password0"></el-input>
				</el-form-item>
				<el-form-item label="{lang new_password}：" prop="password">
					<el-input class="maxWidth" v-model.trim="ruleForm.password"></el-input>
				</el-form-item>
				<el-form-item label="{lang confirm_new_password}：" prop="password2">
					<el-input class="maxWidth" v-model.trim="ruleForm.password2"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" style="width: 100%;" @click="handleSubmit">{lang save}</el-button>
				</el-form-item>
			</el-form>
		</el-main>
	</el-container>
</div>

<script type="text/javascript">
	const { createApp, reactive, toRefs, toRef, ref, onMounted, nextTick, watch } = Vue;
	const dzzoffice = createApp({
		data() {
			var self = this;
			var inputpassword = function(rule, value, callback){
				if (value) {
					if (self.ruleForm.password2 !== '') {
						self.$refs.ruleForm.validateField('password2');
					}
					callback();
				}else{
					callback();
				}
			};
			var inputpassword2 = function(rule, value, callback){
				if (value !== self.ruleForm.password) {
					callback(new Error('{lang password_not_match}'));
				} else {
					callback();
				}
			};
			return {
				DocumentThemeColor:'',
				percentage:0,
				ispercentage:false,
				btnloading:false,
				avatarstatus:'$userdata[avatarstatus]',
				ruleForm: {
					imgpath:'',
					email:'$userdata[email]',
					nickname:'$userdata[nickname]',
					username:'$userdata[username]',
					phone:'$userdata[phone]',
					weixinid:'$userdata[weixinid]',
					password0:'',
					password:'',
					password2:'',
				},
				rules: {
					email: [
						{ required: true, message: '{lang please_input_email}', trigger: 'blur' },
						{ type: 'email', message: '{lang email_illegal}', trigger: ['blur', 'change'] }
					],
					nickname: [
						{ required: true, message: '{lang please_input_nickname}', trigger: ['blur', 'change'] }
					],
					username: [
						{ required: true, message: '{lang please_input_username}', trigger: ['blur', 'change'] }

					],

					password: [
						{ validator: inputpassword, trigger: ['blur', 'change'] }
					],
					password2: [
						{ validator: inputpassword2, trigger: ['blur', 'change'] }
					]
				},
			}
		},
		watch:{
			DocumentThemeColor:{
				handler(newval){
					document.querySelector('html').className = newval
				},
				deep:true,
				// immediate:true
			}
			
			
		},
		created() {
			 //主题颜色
			let theme = localStorage.getItem('theme');
			if(theme){
				this.DocumentThemeColor=theme;
			}else{
				this.DocumentThemeColor = 'light'
			}
		},
		methods: {
			DocumentThemeChange(){
				if(this.DocumentThemeColor=='light'){
					this.DocumentThemeColor='dark';
					localStorage.setItem('theme','dark');
				}else{
					this.DocumentThemeColor='light';
					localStorage.setItem('theme','light');
				}
				
			},
			headerMenuSelect(val){
                if(val == 'library'){
                    window.location.href = DZZSCRIPT+'?mod=pichome&op=library';
				}else if(val == 'banner'){
					window.location.href = DZZSCRIPT+'?mod='+val+'&op=admin';
                }else{
                    window.location.href = DZZSCRIPT+'?mod='+val;
				}
            },
			beforeLogoUpload(file){
				var self = this;
				var isJPG = ['image/png','image/jpeg','image/jpg','image/gif'];
				var isLt2M = file.size / 1024 / 1024 < 2;
				if (isJPG.indexOf(file.type)<0) {
				  self.$message.error('图片格式错误');
				}
				if (!isLt2M) {
				  self.$message.error('图片大小不能超过 2MB!');
				}
				return isJPG && isLt2M;
						
				self.ispercentage = true;
			},
			handleLogoSuccess(res, file){
				if(res.error){
					var self = this;
					self.$message.error(res.error);
				}else{
					this.ruleForm.imgpath = res.path;
				}
			},
			handleLogoProgress(event, file, fileList) {
				var percent = parseInt(event.percent);
				this.percentage = percent;
				if(percent == 100){
					this.ispercentage = false;
					this.percentage = 0
				}
			},
			handleSubmit(){
				var self = this;
				self.$refs.ruleForm.validate(async function(valid){
					if (valid) {
						var params = {
							'accountedit':true,
							'formhash':'{FORMHASH}',
							'uid':'$uid',
							'email':self.ruleForm.email,
							'nickname':self.ruleForm.nickname,
							'username':self.ruleForm.username,
							'phone':self.ruleForm.phone,
							'weixinid':self.ruleForm.weixinid,
							'password0':self.ruleForm.password0,
							'password':self.ruleForm.password,
							'password2':self.ruleForm.password2,
						};
						if(self.ruleForm.imgpath){
							params['imgpath'] = self.ruleForm.imgpath;
						}
						self.btnloading = true;
						const {data: res} = await axios.post('user.php?mod=my&op=profile&do=personal',params);
						if(res.success){
							 self.$message({
							 	message: '{lang}',
							 	type: 'success'
							 });
							//window.location.reload();
						}else{
							self.btnloading = false;
							self.$message.error(res.msg || '{lang failure}');
						}
				    
					} else {
						self.$message.error('{lang forcesecques_cannot_empty}');
						self.btnloading = false;
						return false;
					}
				});
			}
		},
		mounted() {}
	});
	dzzoffice.use(ElementPlus, {
		locale: {$_G['language_list'][$_G['language']]['elementflagCamel']},
	});
	for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
		dzzoffice.component(key, component)
	}
	// 屏蔽警告信息
	dzzoffice.config.warnHandler = function(){return null};
	dzzoffice.mount('#dzzoffice');
</script>

<!--{template common/container/pc/footer}-->
